<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 地球贴</title>
    <link rel="stylesheet" href="./styles.css">
    <style>
        /* 首页特有样式 */
        .search-container {
            padding: 24px 16px;
            background-color: var(--color-card);
            position: sticky;
            top: 0;
            z-index: 80;
            box-shadow: var(--elev-1);
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.95);
        }
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        .search-input {
            width: 100%;
            padding: 14px 18px 14px 48px;
            border-radius: var(--radius-s);
            border: 2px solid var(--color-border);
            background-color: var(--color-bg);
            font-size: 16px;
            outline: none;
            transition: all var(--transition-normal);
        }
        .search-input:focus {
            background-color: white;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px var(--color-primary-weak);
            transform: translateY(-1px);
        }
        .search-input::placeholder {
            color: var(--color-muted);
            font-weight: 400;
        }
        .search-icon {
            position: absolute;
            left: 16px;
            color: var(--color-muted);
            font-size: 20px;
            z-index: 1;
        }
        .search-content {
            padding: 0 16px;
        }
        .chip-scroll {
            margin-top: 20px;
        }
        /* 顶部欢迎区域 */
        .welcome-header {
            padding: 24px 16px;
            background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
            color: white;
            border-radius: 0 0 var(--radius-l) var(--radius-l);
            margin-bottom: 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .welcome-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('');
            opacity: 0.3;
        }
        .welcome-title {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 8px;
            letter-spacing: -1px;
            position: relative;
        }
        .welcome-desc {
            font-size: 16px;
            opacity: 0.9;
            max-width: 320px;
            margin: 0 auto;
            position: relative;
        }
        /* 特色推荐区域 */
        .featured-section {
            padding: 20px 16px;
            background-color: var(--color-card);
            margin: 20px 16px;
            border-radius: var(--radius-m);
            box-shadow: var(--elev-2);
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-fg);
        }
        .section-more {
            color: var(--color-primary);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all var(--transition-normal);
        }
        .section-more:hover {
            transform: translateX(3px);
        }
        .featured-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .featured-scroll::-webkit-scrollbar {
            display: none;
        }
        .featured-card {
            min-width: 200px;
            background-color: var(--color-card);
            border-radius: var(--radius-m);
            overflow: hidden;
            box-shadow: var(--elev-1);
            cursor: pointer;
            transition: all var(--transition-normal);
        }
        .featured-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--elev-3);
        }
        .featured-media {
            height: 120px;
            overflow: hidden;
        }
        .featured-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }
        .featured-card:hover .featured-media img {
            transform: scale(1.1);
        }
        .featured-info {
            padding: 12px;
            text-align: center;
        }
        .featured-name {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--color-fg);
        }
        .featured-desc {
            font-size: 13px;
            color: var(--color-muted);
        }
    </style>
</head>
<body>
    <!-- 顶部欢迎区域 -->
    <div class="welcome-header">
        <h1 class="welcome-title">探索世界</h1>
        <p class="welcome-desc">发现不同国家的文化、历史与地标</p>
    </div>
    
    <!-- 搜索区域（首页） -->
    <div class="search-container">
        <div class="search-box">
            <span class="search-icon">🔍</span>
            <input type="text" class="search-input" placeholder="搜索国家、文化或地标...">
        </div>
    </div>
    
    <!-- 内容区域：分类 + 国家栅格 -->
    <div class="search-content">
        <!-- 地区菜单 -->
        <div class="chip-scroll">
            <button class="chip active">全部</button>
            <button class="chip">亚洲</button>
            <button class="chip">欧洲</button>
            <button class="chip">美洲</button>
            <button class="chip">非洲</button>
            <button class="chip">大洋洲</button>
        </div>
        
        <!-- 特色推荐区域 -->
        <div class="featured-section">
            <div class="section-header">
                <h2 class="section-title">热门探索</h2>
                <a href="#" class="section-more">查看全部 →</a>
            </div>
            <div class="featured-scroll">
                <div class="featured-card">
                    <div class="featured-media">
                        <img src="https://picsum.photos/id/237/800/400" alt="中国">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">中国</div>
                        <div class="featured-desc">长城、故宫、熊猫</div>
                    </div>
                </div>
                <div class="featured-card">
                    <div class="featured-media">
                        <img src="https://picsum.photos/id/1016/800/400" alt="日本">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">日本</div>
                        <div class="featured-desc">樱花、富士山、和服</div>
                    </div>
                </div>
                <div class="featured-card">
                    <div class="featured-media">
                        <img src="https://picsum.photos/id/1036/800/400" alt="法国">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">法国</div>
                        <div class="featured-desc">埃菲尔铁塔、红酒</div>
                    </div>
                </div>
                <div class="featured-card">
                    <div class="featured-media">
                        <img src="https://picsum.photos/id/1015/800/400" alt="意大利">
                    </div>
                    <div class="featured-info">
                        <div class="featured-name">意大利</div>
                        <div class="featured-desc">披萨、罗马斗兽场</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 国家卡片栅格（动态渲染） -->
        <div class="card-grid" id="countryGrid"></div>
    </div>
    
    <!-- 底部导航 -->
    <div class="tab-bar">
        <a href="index.html" class="tab-item active">
            <div class="tab-icon">🌎</div>
            <div class="tab-text">首页</div>
        </a>
        <a href="favorites.html" class="tab-item">
            <div class="tab-icon">👤</div>
            <div class="tab-text">我的</div>
        </a>
    </div>

    <script>
        // 加载数据：优先 data/countries.json，其次 localStorage，最后内置示例
        async function loadCountries() {
            // 1) 尝试读取静态 JSON 数据文件
            try {
                const resp = await fetch('data/countries.json', { cache: 'no-store' });
                if (resp.ok) {
                    const json = await resp.json();
                    if (json && Array.isArray(json.countries)) return json.countries.map(c => ({
                        name: c.name,
                        region: c.region,
                        flag: c.flag,
                        img: c.flag,
                        tags: c.cultureTags,
                        culture: c.cultureTags
                    }));
                }
            } catch (e) {}
            // 2) 回退本地存储
            try {
                const raw = localStorage.getItem('countries');
                if (raw) {
                    const parsed = JSON.parse(raw);
                    if (Array.isArray(parsed)) return parsed;
                }
            } catch (e) {}
            // 3) 最后使用内置示例
            return [
                { name: '中国', region: '亚洲', flag: 'https://picsum.photos/id/237/800/400', tags: '长城 · 熊猫' },
                { name: '日本', region: '亚洲', flag: 'https://picsum.photos/id/1016/800/400', tags: '樱花 · 富士山' },
                { name: '韩国', region: '亚洲', flag: 'https://picsum.photos/seed/korea/800/400', tags: '韩流 · 韩屋村' },
                { name: '印度', region: '亚洲', flag: 'https://picsum.photos/seed/india/800/400', tags: '泰姬陵 · 香料' },
                { name: '法国', region: '欧洲', flag: 'https://picsum.photos/id/1019/800/400', tags: '浪漫 · 埃菲尔铁塔' },
                { name: '意大利', region: '欧洲', flag: 'https://picsum.photos/id/1031/800/400', tags: '艺术 · 比萨斜塔' },
                { name: '美国', region: '美洲', flag: 'https://picsum.photos/id/1025/800/400', tags: '自由女神像 · 国家公园' },
                { name: '埃及', region: '非洲', flag: 'https://picsum.photos/id/1036/800/400', tags: '金字塔 · 尼罗河' },
                { name: '澳大利亚', region: '大洋洲', flag: 'https://picsum.photos/id/1043/800/400', tags: '袋鼠 · 歌剧院' }
            ];
        }

        let allCountries = [];
        const grid = document.getElementById('countryGrid');

        function render(list) {
            grid.innerHTML = '';
            list.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card';
                const img = item.img || item.flag || '';
                const name = item.name || '';
                const tags = item.culture || item.tags || '';
                card.innerHTML = `
                    <div class="media"><img src="${img}" alt="${name}国旗"></div>
                    <div class="card-body">
                        <div class="card-title">${name}</div>
                        <div class="card-tag">${tags}</div>
                    </div>
                `;
                card.addEventListener('click', function(){
                    if (name) location.href = `country.html?name=${encodeURIComponent(name)}`;
                });
                grid.appendChild(card);
            });
        }

        // 启动：加载数据后再绑定事件
        (async function init(){
            allCountries = await loadCountries();
            render(allCountries);
            document.querySelectorAll('.chip-scroll .chip').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.chip-scroll .chip').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    const region = this.textContent.trim();
                    if (region === '全部') {
                        render(allCountries);
            } else {
                        render(allCountries.filter(c => c.region === region));
                    }
                });
            });
        })();
    </script>
</body>
</html>

